<template>
    <div class="view-wrapper">
      
      <!-- app-container -->
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="视频号商品id：" prop="videoProductId">
            <el-input v-model="queryParams.videoProductId" placeholder="请输入视频号商品id" clearable />
          </el-form-item>
          <el-form-item label="赚卡商品id：" prop="goodsId">
            <el-input v-model="queryParams.goodsId" placeholder="请输入赚卡商品id" clearable />
          </el-form-item>
          <el-form-item label="最后修改时间：">
              <el-date-picker clearable v-model="date" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime"
                placeholder="请选择">
              </el-date-picker>
            </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div class="listBox_head">
          <el-button type="primary" style="margin: 10px 0 20px" @click="addClick">新建</el-button>
        </div>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="tabList"
          stripe
          border
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="视频号商品id" prop="videoProductId"></el-table-column>
          <el-table-column label="赚卡商品id" prop="goodsId"></el-table-column>
          <el-table-column label="关联赚卡名称" prop="merchantEquityCardName"></el-table-column>
          <el-table-column label="售价" prop="price"></el-table-column>
          <el-table-column label="库存" prop="stock"></el-table-column>
          <el-table-column label="已售库存" prop="sellStock"></el-table-column>
          <el-table-column label="创建人" prop="createByName"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="180"
            class-name="small-padding fixed-width"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleRemove(scope.row)" >移除关联</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList"></pagination>
      </div>
      <Dialog v-bind="$attrs" v-if="dialogVisible" :visible.sync="dialogVisible" @success="_handleSuccess">
      </Dialog>
    </div>
  </template>
  
  <script>
    import {
      productList,
      removeProduct,
    } from "@/api/merchantsNFR/wxGoodsManage";
    import Dialog from "./components/dialog";

    import ExportExcelButton from "@/components/ExportExcelButton/index";
    
    export default {
      name: "",
      components: {
        Dialog,
        ExportExcelButton
      },
      data() {
        return {
          dialogId: '',
          dialogVisible: false,
          removeDialogVisible: false,
          // 遮罩层
          loading: false,
          // 导出遮罩层
          // 总条数
          total: 0,
          //表格数据
          tabList: [],
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            goodsId: '', //赚卡商品id
            videoProductId: '', //视频号商品id
            startTime: '', //开始时间
            endTime: '', //结束时间
          },
          imgList: [],
          ids: '',
          isDown: false,
          date: [],
        };
      },
      computed: {
        ExportParams() {
          const params = {
            ids: this.ids,
          };
          return params;
        },
      },
      created() {
        this.getList();
      },
      methods: {
        /** 查询列表 */
        getList() {
          this.loading = true;
          productList(this.queryParams).then(response => {
            this.tabList = response.result.records;
            this.total = response.result.total;
            this.loading = false;
          });
        },
        //处理时间
        changeTime(e){
          this.queryParams.startTime = e[0]
          this.queryParams.endTime = e[1]
        },
        // 表单重置
        reset() {
          this.date = []
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            goodsId: '', //赚卡商品id
            videoProductId: '', //视频号商品id
            startTime: '', //开始时间
            endTime: '', //结束时间
          };
          this.resetForm("queryParams");
          this.handleQuery()
        },
        //新增
        addClick() {
          this.dialogVisible = true;
        },
        //移除
        handleRemove(row){
          this.$confirm('是否移除关联', '提示', {
            confirmButtonText: '同意',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            removeProduct(row.merchantEquityCardId).then((response) => {
              this.getList();
              this.$message.success('操作成功')
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });          
          });
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          // this.resetForm("queryForm");
          this.reset();
        },
        _handleSuccess(e) {
          //成功回调
          // this.resetQuery()
          this.getList()
        },
        
      }
    };
  
  </script>
  <style scoped>
    .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
    }
  
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px;
      margin-top: 10px;
    }
  
    .listBox_head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .img_box {
      width: 100px;
      height: 80px;
      border-radius: 4px;
    }
  </style>
  